<template>
  <a class="card" :class="{ 'add-card': isAddCard }" :data-id="link?.linkId" @click="handleClick"
    @contextmenu.prevent="handleContextMenu">
    <img :src="displayIcon" :alt="isAddCard ? '添加' : link?.name"
      onerror="this.src='https://api.iconify.design/mdi:web.svg'" />
    <div>{{ isAddCard ? '添加' : link?.name }}</div>
  </a>
</template>

<script setup lang="ts">
import { computed, onMounted, nextTick } from 'vue'
import { useLinks } from '@/composables/useLinks'
import type { CardProps } from '@/types'
import { IconType } from '@/types'
import { generateTextSvg } from '@/utils/iconUtils'

const props = defineProps<CardProps>()

const emit = defineEmits<{
  (e: 'add'): void
  (e: 'contextmenu', event: MouseEvent, link: any): void
}>()

const { openLink } = useLinks()


const displayIcon = computed(() => {
  if (props.isAddCard) {
    return 'https://api.iconify.design/mdi:plus.svg'
  }

  // 严格根据iconType字段显示对应的图标
  const iconType = props.link?.iconType || IconType.onlineIcon
  // const iconType = computed(() => props.link?.iconType || IconType.online_icon)

  if (iconType === IconType.paidIcon) {
    return props.link?.paidIcon || 'https://api.iconify.design/mdi:upload.svg'
  } else if (iconType === IconType.textIcon) {
    // 文字图标使用data URL格式显示
    const text = props.link?.textIcon || props.link?.name || 'A'
    return generateTextSvg(text.charAt(0), {})
  } else if (iconType === IconType.onlineIcon) {
    return props.link?.onlineIcon || 'https://api.iconify.design/mdi:web.svg'
  } else {
    return props.link?.onlineIcon || 'https://api.iconify.design/mdi:web.svg'
  }
})

const handleClick = () => {
  if (props.isAddCard) {
    emit('add')
  } else if (props.link && props.link.linkId !== undefined) {
    openLink(props.link)
  }
}

const handleContextMenu = (event: MouseEvent) => {
  if (!props.isAddCard && props.link && props.link.linkId !== undefined) {
    emit('contextmenu', event, props.link)
  }
}

// 文字图标现在通过displayIcon计算属性处理，不再需要DOM操作
onMounted(() => {
  nextTick(() => {
    // 可以在这里添加其他需要在组件挂载后执行的逻辑
  })
})
</script>

<style scoped>
.card {
  cursor: pointer;
}

.add-card {
  background: linear-gradient(145deg, rgba(74, 108, 247, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px dashed var(--accent);
}
</style>
